<template>
    <div class="applyDataUpload">
        <h3>借款申请资料上传</h3>
        <el-form label-width="100px" ref="UploadInfo" :inline="true">
            <el-form-item style="margin-bottom: 50px;width: 600px;">

                <el-upload
                    class="upload-demo"
                    :action="actionUrl"
                    list-type="picture"
                    :on-success="handleSuccess"
                    :before-upload="beforeAvatarUpload"
                    :on-preview="handlePictureCardPreview"
                    :data="DataUploadInfo"
                    :file-list="fileList"
                    :on-remove="handleRemove"
                    multiple
                    accept="image/*">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
                </el-upload>
            </el-form-item>
            <br>
            <el-form-item class="btn-box">
                <el-button type="primary" @click="back()">上一步</el-button>
                <el-button type="primary" @click="uploadData">下一步</el-button>
            </el-form-item>
        </el-form>

        <el-dialog v-model="dialogVisible" size="tiny">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
    import { listLoanData, saveLoanData, deleteLoanData, keyHex } from "@/api/api";
    import CryptoJS from 'crypto-js';
    export default {
        name: "applyDataUpload",
        data () {
            return {
                actionUrl: process.env.API_URL +'/zuul/api-loan/loan/upload/loanData',
                DataUploadInfo: {
                    platformNo: "",
                    loanNo: this.$route.query.loanNo,
                    dataType: 0
                },
                fileList: [],
                dialogImageUrl: '',
                dialogVisible: false
            };
        },
        watch: {
            $route: function (to) {
                if (to.name === "applyDataUpload") {
                    let user = JSON.parse(window.sessionStorage.getItem("sysUser"));
                    this.DataUploadInfo.platformNo = user?user.platformNo:'1';
                    this.pageNum = this.$route.query.pageNum;
                    this.DataUploadInfo.loanNo = this.$route.query.loanNo;
                    this.getData();
                }
            }
        },
        mounted (){
            this.$nextTick(function () {
                let user = JSON.parse(window.sessionStorage.getItem("sysUser"));
                this.DataUploadInfo.platformNo = user?user.platformNo:'1';
                this.pageNum = this.$route.query.pageNum;
                this.DataUploadInfo.loanNo = this.$route.query.loanNo;
                this.getData();
            });
        },
        methods: {
            //  初始化获取数据；
            async getData () {
                let _this = this;
                await listLoanData({
                    "loanNo": this.$route.query.loanNo,
                    "dataType": 0
                }).then((res) => {
                    if (res.data.state.code === "200") {
                        let Data = JSON.parse(res.data.ciphertext);
                        _this.fileList = Data;
                    }
                });
            },
            // 上传文件之前
            beforeAvatarUpload(file) {
                console.log("DataUploadInfo", this.DataUploadInfo);
                this.DataUploadInfo.loanNo = this.$route.query.loanNo;
                const isJPG = file.type === 'image/jpeg';
                const isPNG = file.type === 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG && !isPNG) {
                    this.$message.error('只能上传 jpg / png 文件');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return (isJPG || isPNG) && isLt2M;
            },
            // 上传成功
            handleSuccess (response, file, fileList) {
                this.fileList = fileList;
                console.log("this.fileList", this.fileList);
                let ciphertext = CryptoJS.TripleDES.decrypt(response.ciphertext, keyHex, {
                    iv: CryptoJS.enc.Utf8.parse(keyHex),
                    mode: CryptoJS.mode.ECB,
                    padding: CryptoJS.pad.Pkcs7
                });
                ciphertext = CryptoJS.enc.Utf8.stringify(ciphertext);
                response.ciphertext = JSON.parse(ciphertext);
                file.dataNo = response.ciphertext.dataNo;
                // console.log("response", response);
                console.log("fileList", file.response.ciphertext.dataNo);
                console.log("DataUploadInfo,成功", this.DataUploadInfo);
            },
            // 删除图片
            handleRemove (file) {
                console.log(file);
                deleteLoanData({
                    "platformNo": this.DataUploadInfo.platformNo,
                    "loanNo": this.$route.query.loanNo,
                    "dataNo": file.dataNo
                }).then((res) => {
                    console.log(res);
                });
            },
            // 放大预览
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            // 上一步；
            back () {
                this.$router.push({path: '/applyTable', query: {productNo: '20201710301736172929',loanNo: this.$route.query.loanNo, userNo: this.$route.query.userNo}});
            },
            // 下一步
            async uploadData () {
                let _this = this;
                await saveLoanData({
                    "loanNo": this.$route.query.loanNo,
                    "userNo": this.$route.query.userNo
                }).then((res) => {
                    if(res.data.state.code === "200") {
                        _this.$message({
                            message: "成功",
                            type: 'success'
                        });
                        let phoneData = JSON.parse(res.data.ciphertext);
                        console.log(phoneData);
                        _this.$router.push({path: '/applyOpenAccount', query: {loanNo: _this.$route.query.loanNo}});
                    }
                });
            }
        }
    };
</script>

<style scoped lang="scss">
    .applyDataUpload{
        margin: 40px auto;
        h3{
            text-align: center;
            margin: 30px 0;
            font-size:16px;
        }
        .el-form{
            width: 600px;
            margin: 40px auto;
        }
    }
</style>
